<template>
  <div style="display: flex;">
    <div :style="{width:(isCollpase ? '64px' : '208px')}">
      <el-menu
          background-color="#6B238E"
          text-color="#fff"
          active-text-color="#FFFF00"
          style="width: 100%;height: 100vh;"
          :collapse="isCollpase"
          unique-opened
          router
          :collapse-transition="false"
      >
        <el-row style="padding-top: 10px">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollpase ? 0 : 13" >
          <router-link to="/" style="color: #fff;font-weight: bold; text-decoration:none; position: relative;top: 8px;left: 10px;">智慧车辆</router-link>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size:21px;"><User/></el-icon><span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><Van/></el-icon><span>车辆管理</span>
          </template>
          <el-menu-item index="/vehicle">基本信息</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;"><Location/></el-icon><span>电子围栏</span>
          </template>
          <el-menu-item index="/geofence">围栏管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;"><Place/></el-icon><span>调度管理</span>
          </template>
          <el-menu-item index="/application">申请列表</el-menu-item>
          <el-menu-item index="/audit">调度审核</el-menu-item>
          <el-menu-item index="/distribute">车辆分配</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><MessageBox/></el-icon><span>用户字典</span>
          </template>
          <el-menu-item index="/dict">字典管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div :style="{width:(isCollpase ? 'calc(100% -64px)' :'calc(100%-208px)')}">
      <el-header style="height: 10vh;background-color: #fff;padding-top: 22px;">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size: 20px;"@click="changeCollpase"><Expand/></el-icon>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </el-header>

    <router-view/>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
const isCollpase = ref(false);
const changeCollpase=()=>{
  isCollpase.value=!isCollpase.value;
}
</script>